<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

//控制导航高亮
const selectedIndex = ref(0);
const onClick = (index, routerUrl) => {
  selectedIndex.value = index;
  router.push(routerUrl);
};
</script>

<template>
  <!-- 首页架子 -->
  <div class="home">
    <!-- 侧边栏 #424956-->
    <div class="left">
      <div class="top">
        <div class="text1">大学生心理健康</div>
        <div class="text1">多维度分析与早期预警系统</div>
      </div>
      <el-menu
        text-color="#000"
        default-active="/home/homepage"
        class="el-menu-vertical-demo"
        router
      >
        <el-menu-item index="/home/homepage">
          <!-- <el-icon><icon-menu /></el-icon> -->
          <span>首页</span>
        </el-menu-item>

        <el-sub-menu index="/home/numericalFeatureCorrelation">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>特征相关性</span>
          </template>

          <el-menu-item
            :style="{ paddingLeft: '70px' }"
            index="/home/numericalFeatureCorrelation"
            >数值型特征相关性</el-menu-item
          >

          <el-menu-item
            :style="{ paddingLeft: '70px' }"
            index="/home/correlationOfCategoricalFeatures"
            >分类型特征相关性</el-menu-item
          >
        </el-sub-menu>

        <el-menu-item index="/home/featureAnalysis">
          <!-- <el-icon><document /></el-icon> -->
          <span>特征分析</span>
        </el-menu-item>

        <el-menu-item index="/home/modelComparison">
          <!-- <el-icon><setting /></el-icon> -->
          <span>模型对比</span>
        </el-menu-item>

        <el-sub-menu index="/home/numericalFeatureCorrela">
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>抑郁预警及干预策略</span>
          </template>

          <el-menu-item :style="{ paddingLeft: '70px' }">
            <a
              href="https://mp-aac40445-2db3-4c7f-be84-598b1d39316a.cdn.bspapp.com/LightHouseFlask/model_predict.exe"
              >下载运行文件</a
            >
          </el-menu-item>

          <el-menu-item :style="{ paddingLeft: '70px' }">
            <a
              href="https://mp-aac40445-2db3-4c7f-be84-598b1d39316a.cdn.bspapp.com/LightHouseFlask/Depression_Students.csv"
              >下载数据文件</a
            >
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <!-- 路由出口 -->
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="scss" scoped>
//鼠标悬停时的每一个小块的背景颜色
$hoveBackgroundColor: rgba(0, 0, 0, 0.2);

.home {
  a{
    width: 100%;
    text-decoration: none;   /* 移除下划线 */
    color: inherit;          /* 继承父元素文本颜色 */
    cursor: pointer;          /* 设置鼠标悬停为手型 */
  }
  width: 100%;
  height: 100vh;
  display: flex;
  .left {
    padding: 20px 20px 0 0;
    height: 100vh;
    color: #666;
    width: 17%;
    background: #fff;
    box-shadow: rgba(154, 154, 154, 0.2) 0 0 5px;
    .top {
      .text1 {
        font-family: 'NavigationBar' !important;
        padding-left: 20px;
        font-weight: 700;
        font-size: 20px;
        line-height: 1.5em;
      }
    }
    .el-menu-vertical-demo {
      --active-color:'#fff'
      overflow: hidden;
      background: #fff;
    box-shadow: rgba(154, 154, 154, 0.2) 0 0 5px;

      border-radius: 5px;
      margin-top: 10px;
      border: 0;


      // 父元素鼠标悬停时每个的颜色
      .el-menu-item:hover {
        background: $hoveBackgroundColor;
      }
      .el-sub-menu {
        ::v-deep() {
          // 给特征相关性设置鼠标悬浮颜色

          .el-sub-menu__title:hover {
            background: $hoveBackgroundColor;
          }
        }

        .el-menu--inline {
          .el-menu-item {
            //特征相关性子目录的背景颜色
            background:#F1F3F5;
            // 子目录鼠标悬停背景颜色
            &:hover {
              background: $hoveBackgroundColor;
            }
          }
        }
      }
    }
    .bottom {
      border-radius: 5px;
      overflow: hidden;
      margin-top: 20px;
      //   height: 500px;
      background: #525b6c;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .box {
        height: 80px;
        background: rgba(0, 0, 0, 0);
        padding-left: 30px;
        display: flex;
        justify-content: left;
        align-items: center;
        .icon {
          margin-right: 10px;
        }
        // 高亮效果
        &.selected {
          background: #363f50;
        }
        &:hover {
          background: #676e7c;
        }
      }
    }
  }
  .right {
    overflow: auto;
    flex: 1;
    // background: #62b613;
  }
}
</style>
